<template>
    <video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>

<script>
import Videojs from 'video.js'

export default {
    props: {
        url: "",
    },
    data() {
        return {
            player: null
        }
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose() // Removing Players,该方法会重置videojs的内部状态并移除dom
        }
    },
    activated() {
        if (this.player) {
            this.player.play()
        }
    },
    deactivated() {
        if (this.player) {
            this.player.pause()
        }
    },
    mounted() {
        this.initVideo()
    },
    methods: {
        initVideo() {
            if (!this.player) {
                this.player = Videojs('videoPlayer', {
                    autoplay: true, // 设置自动播放
                    muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
                    preload: 'auto', // 预加载
                    controls: false // 显示播放的控件
                })
            }
            this.player.src([{
                src: this.url,
                type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
            }])
        }
    }
}
</script>

<style lang="scss" scoped>
.video,
video {
    width: 100%;
    height: 580px;
}

.vjs-loading-spinner {
    position: relative;

    .vjs-control-text {
        opacity: 0;
    }
}
</style>